<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      charts: '',
      xAngleList: [],
      yList: [],
      xyList: [],
      timerList: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options() {
      const Echarts = require('echarts')
      return {
        title: {
          text: this.monitorName,
          x: 'center',
          align: 'right'
        },
        grid: {
          left: '70px',
          right: '80px',
          bottom: '80px'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params, ticket, callback) => {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              contentArr.push(Format(new Date(data.value[0])))
              // data.seriesName + '值：'
              contentArr.push(data.marker + '降雨量：'  + data.value[1]+'mm')
            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            xAxisIndex: [0], // 确保这个 dataZoom 控制的是 X 轴
          },
          {
            // 内置的 X 轴缩放，可以用鼠标滚轮操作
            type: 'inside',
            xAxisIndex: [0], // 明确指定这个 dataZoom 控件控制哪个 X 轴
          },
        ],

        xAxis: {
          splitLine: {
            show: false
          },
          type: 'time',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            showMaxLabel:true,
            formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
            },
          }
        },
        yAxis: {
          name: '降雨量(mm)',
          type: 'value',
          min: function (value) {
            if (value.min == 0) {
              return 0
            }
            return Math.ceil(value.min) - 1// 向上取整
          },
        },
        series: [
          {
            // markLine: {
            //   data: [
            //     {
            //       type: 'average',
            //       lineStyle: {
            //         color: 'rgb(56, 94, 19)',
            //         width: 1
            //       },
            //       label: {
            //         normal: {
            //           padding: [-13, -20, 15, -45],
            //           position: 'end',
            //           formatter: function (data, index) { // 坐标轴文字展示样式处理
            //             return '平均降雨量:'+ data.value + 'mm'
            //           },
            //         }
            //       },
            //     },]
            // },
            markPoint: {
              symbolSize: 80,
              data: [
                {
                  type: 'max', name: 'Max', itemStyle: {
                    color: '#9d2002'
                  }
                },
              ],
              label: {
                position: "inside",
                distance: 7,
                formatter: function (data) {
                  return '最大降雨量\n' + data.value + 'mm'
                }
              },
            },
            name: this.monitorName,
            type: 'line',
            smooth: true,

            symbol: 'none',
            data: this.xAngleList,
            areaStyle: {
              normal: {
                color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0.1, color: '#0600ff' // 0% 处的颜色
                  }, {
                    offset: 0.3, color: '#1c85ff' // 100% 处的颜色
                  }, {
                    offset: 1, color: '#00f2fd' // 100% 处的颜色
                  }]
                )
              }
            },
            itemStyle: {
              normal: {
                color: '#1c85ff',
                lineStyle: {
                  width: 1,
                  color: '#1c85ff'
                }
              }
            }
          }
        ],




      }
    }
  },
  methods: {
    updateEchart(data, titleName) {
      this.monitorName = titleName
      this.xAngleList = data
      this.charts.clear()
      this.charts.setOption(this.options)
      this.charts.resize()
    },
  },
}
</script>
